<template>
  <div class="c-fc-gray c-fs24 c-p">
    <div class="masker" @touchmove.stop.prevent v-if="maskerStatus" @click="closeMasker"></div>
    <div v-if="faceType == 0" class="c-flex-row c-justify-sb c-fs24 c-fc-xblack c-w100 c-ph64 c-pv36 c-bd-b20-f5">
      <div class="c-flex-column c-aligni-center" @click="goToList(1)">
        <img class="c-ww100 c-hh100" :src="require('../../../public/i/wap/edu/my_class.png')" alt="">
        <span class="c-mt10">我的课程</span>
      </div>
      <div class="c-flex-column c-aligni-center" @click="goToList(2)">
        <img class="c-ww100 c-hh100" :src="require('../../../public/i/wap/edu/class_record.png')" alt="">
        <span class="c-mt10">上课记录</span>
      </div>
      <div class="c-flex-column c-aligni-center" @click="goToList(3)">
        <img class="c-ww100 c-hh100" :src="require('../../../public/i/wap/edu/classmate_manage.png')" alt="">
        <span class="c-mt10">学员管理</span>
      </div>
    </div>
    <div v-if="isShowCalendar && faceType != 1 && faceType != 3" class="c-w100" :class="faceType == 0 ? 'c-hh320' : ''">
      <div class="c-w100 c-bg-white c-pz99" :class="[(faceType == 0 && isFixed) || faceType != 0 ? ('c-box-shadowEdu c-pf ' + ($unenableTopNav() ? 'c-p-t0' : 'c-p-t68')) : '']">
        <div v-if="faceType == 0" class="c-ph24 c-pt30 c-fs28 c-fw600 c-fc-xblack">预约上课</div>
        <edu-calendar ref="eduCalendar" :calendarGuideTop="faceType == 0 ? 'c-mt520' : 'c-mt190'" :dateMasksList="dateMasksList" @getSelectDate="getSelectDate" @getScheduleDate="getScheduleDate" :selectedDay="selectedDay" class="c-w100 c-bg-white c-pb10" positionClass="c-p"></edu-calendar>
        <div v-if="faceType == 0" class="c-mh24 c-flex-row c-aligni-center c-pt24 c-pb16 c-justify-sb c-p c-pz100 c-bg-white c-bd-t1-f6">
          <div class="c-w66 c-flex-row c-aligni-center c-fc-gray">
            <group class="selectStudent c-maxw c-text-ellipsis1">
              <popup-picker class="c-maxw c-text-ellipsis1" :class="filterSchoolId[0] && filterSchoolId[0] != 0 ? 'picked' : ''" value-text-align="left" :themeColor="$getThemeColor()" v-model="filterSchoolId" :show-name="true" :data="schoolList" @on-change="changeSchool"></popup-picker>
            </group>
            <span class="iconfont c-ml4 c-fs24 c-rotate180 c-flex-shrink0">&#xe67a;</span>
          </div>
          <div class="c-w25 c-flex-row c-aligni-center c-justify-end c-fc-gray">
            <group class="selectStudent c-maxw c-text-ellipsis1">
              <popup-picker :themeColor="$getThemeColor()" :class="filterStudentId[0] && filterStudentId[0] != 0 ? 'picked' : ''" v-model="filterStudentId" :show-name="true" :data="allStudent" @on-change="changeStudent"></popup-picker>
            </group>
            <span class="iconfont c-ml4 c-fs24 c-rotate180 c-flex-shrink0">&#xe67a;</span>
          </div>
        </div>
      </div>
    </div>
    <div :class="faceType == 2 ? 'c-pt190' : ''">
      <!-- 预约课程 || 上课记录 -->
      <schedule-item v-if="faceType == 0 || faceType == 2" :scheduleList="appointmentOrRecordList" :faceType="faceType"></schedule-item>
      <!-- 课程列表  -->
      <div v-if="faceType == 1" class="c-p">
        <div class="c-pf c-pz100 c-w100 c-maxw640 c-bg-white" :class="$unenableTopNav() ? 'c-p-t0' : 'c-p-t68'">
          <div class="c-p c-ph24">
            <div @touchmove.stop.prevent class="c-flex-row c-justify-sb c-aligni-center c-fw400 c-w100 c-bg-white c-hh70">
              <div @click="chageCourseStatus(2)" :class="courseStatus == 2 ? 'c-fc-xblack c-fw-b':''">进行中</div>
              <div @click="chageCourseStatus(1)" :class="courseStatus == 1 ? 'c-fc-xblack c-fw-b':''">未开始</div>
              <div @click="chageCourseStatus(3)" :class="courseStatus == 3 ? 'c-fc-xblack c-fw-b':''">已结束</div>
              <div @click="selectPopup" class="c-flex-row c-aligni-center" :class="courseType != 0 || sourceType != 0 || currentStudentId != 0 ? 'theme-fc' : ''">筛选<span class="iconfont c-fs12 c-ml10">{{!arrowStatus ? '&#xe601;' :'&#xe604;'}}</span></div>
            </div>
            <div v-if="arrowStatus" class="c-pt40 c-pa c-p-l0 c-p-t50 c-bg-white c-ph24 c-pz1000 c-w100">
              <div class="c-pb10 c-maxh400 c-contexty-scroll">
                <div class="c-flex-row c-aligni-center c-justify-start c-pb20 c-flexw-wrap c-bd-b1-f6">
                  <div class="c-fs24 c-br25 c-ww130 c-hh50 c-lh50 c-mb20 c-textAlign-c c-p" :class="index % 4 == 0 ? '': 'c-ml24'" v-for="(item, index) in saleTypeList" :key="index" @click="changeSourceType(item.index)">
                    <div class="c-br25 c-ww130 c-hh50 c-pa c-p-t0 c-p-l0" :class="sourceType == item.index ? 'theme-bg-10 theme-fc' : 'c-bg-sgray'">{{item.title}}</div>
                  </div>
                </div>
                <div class="c-flex-row c-aligni-center c-justify-start c-pb20 c-flexw-wrap c-mt40 c-bd-b1-f6">
                  <div class="c-fs24 c-br25 c-ww130 c-hh50 c-lh50 c-mb20 c-textAlign-c c-p" :class="index % 4 == 0 ? '': 'c-ml24'" v-for="(item, index) in classTypeList" :key="index" @click="changeCourseType(item.index)">
                    <div class="translate-center c-text-ellipsis1 c-w100 c-pz10 c-br25" :class="courseType == item.index ? 'theme-fc theme-bg-10' : 'c-fc-sblack c-bg-sgray'">{{item.type}}</div>
                  </div>
                </div>
                <div class="c-flex-row c-aligni-center c-justify-start c-flexw-wrap c-mb20 c-mt40">
                  <div class="c-fs24 c-br25 c-ww130 c-hh50 c-lh50 c-mb20 c-textAlign-c c-p" :class="index % 4 == 0 ? '': 'c-ml24'" v-for="(item, index) in studentList" :key="index" @click="selectStudent(item.studentId)">
                    <div class="translate-center c-text-ellipsis1 c-w100 c-pz10 c-br25" :class="item.studentId == currentStudentId ? 'theme-fc theme-bg-10' : 'c-fc-sblack c-bg-sgray'">{{item.studentName}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-w100 c-ph24 c-pt60">
          <div class="c-pv30 c-flex-row c-aligni-start c-w100 c-bd-b1" v-for="(item,index) in courseList" :key="index" @click="goCourseDetail(item.id,item.saleCourseId,item.courseId,item.studentId,item.isAllow,item.isSignIn)">
            <div>{{item.saleCourseType}}</div>
            <div class="c-p c-ww210 c-hh140">
              <!-- 教务封面显示规则  面授课 > 机构课程 > 默认图  -->
              <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(((item.saleCourseId == null || item.saleCourseId == 0) ? item.courseCover : (item.saleCourseCover)), require('../../../public/i/wap/edu/enlist.png'))" />
              <img class="c-pa c-p-t-1 c-p-l0 c-ww76 c-hh32 c-br-tl16" :src="'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/public/i/wap/edu/' + (item.courseType == '体验课' ? 'experience' : 'formal') + '.png'" />
            </div>
            <div class="c-ml20 c-flex-column c-justify-sb c-hh140 c-w0 c-flex-grow1">
              <div>
                <p class="c-fw-b c-text-ellipsis1 c-fc-xblack">{{item.saleCourseName}}</p>
                <p class="c-mt24 c-text-ellipsis1 c-fs20">学员: {{item.studentName}} / 来源: {{item.orderSource}}</p>
              </div>
              <div class="c-text-ellipsis1 c-fs20" v-if="item.courseType != '体验课'">
                剩余额度:
                <span v-if="item.saleType == 1">{{item.quota}}(剩) / {{item.periodNum}}(总)课时</span><!-- 按课时 -->
                <span v-if="item.saleType == 2 || item.saleType == 3">{{item.quota}}{{item.saleType == 2 ? '天' : ''}}</span><!-- 按时段、按班级 -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 学员管理 -->
      <div class="" v-if="faceType == 3">
        <div class="c-flex-row c-justify-sb c-aligni-center c-ph24" v-for="(item,index) in manageStudentList" :key="index">
          <div class="c-flex-row c-aligni-center c-w100" @click="goToEditStudentInfo(item.studentId)">
            <div class="c-ww110 c-hh110 c-h c-text-hidden">
              <img :src="$addXossFilter(item.avatar || (item.studentSex == 0 ? defultHeadUrl : item.studentSex == 1 ? boyHeadUrl : girlHeadUrl), '')" alt="" class="c-w100 c-h c-brp50">
            </div>
            <div class="c-ml20 c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-bd-b1 c-hh170">
              <div class="c-flex-column c-hh110 c-justify-sb">
                <p class="c-fc-xblack c-fw-b">{{item.studentName}}</p>
                <p class="c-fs20">{{item.studentNo}}</p>
                <p class="c-fs20">来源:{{item.type == 1 ? "微信端绑定" : "后台绑定"}}</p>
              </div>
              <div class="iconfont c-fc-xblack">&#xe90e;</div>
            </div>
          </div>
        </div>
        <div class="c-w100 c-maxw640 c-hh100 c-bd-t1 c-bg-white c-pf c-p-b0 c-flex-row c-aligni-center c-ph24">
          <div class="c-w100 c-hh64 theme-bg-gradient c-fc-white c-fs28 c-flex-row c-flex-center c-br30" @click="showAddStuMoadl">新增学员</div>
        </div>
        <open-modal
          :openModal="openAddStuModal"
          @closeModal="closeAddStuModal"
        >
          <div class="c-bg-white c-br-tl20 c-br-tr20 c-pr24 c-pl24 c-maxh760 ">
            <div class="c-hh80 c-lh80 c-textAlign-c c-bd-b1" @click="addStudent">新增学员</div>
            <div class="c-hh80 c-lh80 c-textAlign-c" @click="handleClickRoute">绑定学员</div>
          </div>
        </open-modal>
      </div>
    </div>
    <div class="c-pf c-p-b280 c-pz100 c-p-r0 c-ww100 c-hh42 c-lh42 appointment-record c-fc-white c-br-tl20 c-br-bl20 c-fs20 c-textAlign-c c-pz10" v-if="faceType == 0" @click="goAppointmentList">预约记录</div>
    <div v-if="isTeacher" class="c-pf c-p-b220 c-pz100 c-p-r0 c-ww100 c-hh42 c-lh42 c-bg-white theme-fc c-br-tl20 c-br-bl20 c-fs20 c-textAlign-c c-pz10 c-box-shadowEdu" @click="goCourseManagment">教师端</div>
    <loading-status-tem :noDataText="'暂无记录'" :dataStatus="dataStatus"></loading-status-tem>
    <nav-bottom-bar style="z-index:98" :itemIndex="24" v-if="showNavBottomBar && faceType == 0"></nav-bottom-bar>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index';
import EduCalendar from "@/components/templates/edu/eduCalendar.vue";
import scheduleItem from "@/components/templates/edu/scheduleItem.vue";
import openModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: 'FaceTeaching',
  components: {
    EduCalendar,
    openModal,
    loadingStatusTem,
    scheduleItem,
    NavBottomBar,
    PopupPicker,
    CoverImg
  },
  props: [],
  beforeCreate() {
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      faceType: 0, // 0 预约上课列表 1 课程列表 2 上课记录 4 学员管理
      appointmentOrRecordList: [], // 预约课程列表或上课记录列表
      dateMasksList: [], // 有预约课程的日期列表
      currentStudentId: 0, // 当前学员id
      startTime: '', // 筛选时间，开始
      endTime: '', // 筛选时间，结束
      courseStatus: 2, // 课程状态  1未开始 2进行中 3已结束
      courseType: 0, // 课程类型 0全部 1体验课 2正式课
      sourceType: 0, // 课程来源类型 对应saleTypeList的类型
      courseList: [], // 课程列表
      studentList: [], // 学员列表
      manageStudentList: [], // 管理学员列表
      arrowStatus: false,
      maskerStatus: false,
      openAddStuModal: false, // 是否显示新增学员的弹窗
      isShowCalendar: true, // 是否显示日历，用于刷新日历数据
      showNavBottomBar: false,
      companyAuth: null,
      selectedDay: '', // 路由上传的日期
      saleTypeList: [{
        title: '全部课程',
        index: 0
      }, {
        title: '线上买课',
        index: 1
      }, {
        title: '线下报名',
        index: 2,
      },
      // {
      //   title: '线下续费',
      //   index: 3
      // },
      {
        title: '批量导入',
        index: 4
      }, {
        title: '课程更换',
        index: 6
      }],
      classTypeList: [{
        type: '全部类型',
        index: 0
      },
      {
        type: '正式课',
        index: 2
      },
      {
        type: '体验课',
        index: 1
      }],
      girlHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/sbM2pllKIy4XBL6YvzVWg3fGy7e86dZWxGqeGolZ.png'),
      boyHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/A9DusxF83dvjP350bfy4L4FskZTvDmpRde96Ezoq.png'),
      defultHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/PehFKbnKSxefJgdSicZ84CV8LmPKLmdBwA8WmbuR.png'),
      isTeacher: false, // 是否同时是老师
      isFixed: false, //是否吸顶
      filterStudentId: ['0'],
      filterSchoolId: ['0'],
      allStudent: [],
      schoolList: [],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  watch: {
    $route(to, from) {
      this.isShowCalendar = false;
      this.selectedDay = '';
      if (to.path.indexOf('/edu/faceTeaching') > -1 && from.path.indexOf('/edu/faceTeaching') > -1 && this.faceType != to.query.faceType) {
        this.faceType = to.query.faceType || 0;
        this.initData();
      }
    }
  },
  computed: {
  },
  methods: {
    changeSchool(val) {
      this.appointmentOrRecordList = []
      this.dataStatus = 'HAS_MORE_DATA';
      pageIndex = 1
      this.getAppointmentList();
    },
    changeStudent(val) {
      this.appointmentOrRecordList = []
      this.dataStatus = 'HAS_MORE_DATA';
      pageIndex = 1
      this.getAppointmentList();
    },
    checkUserRole() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + 'educationSystem/mentor/teacher/checkUserRole', res => {
          resolve(res)
        }, failRes => {
          reject(failRes)
        })
      })
    },
    async initData() {
      // 优先返回老师身份role
      const res = await this.checkUserRole()
      const jwRole = localStorage.getItem("jwRole")
      this.isTeacher = !!(res.role == 2)
      // 如果缓存身份是学生，返回role是老师，同时还是学生身份，就保持进入该页面
      // 如果缓存是老师，返回却是学生，替换缓存身份，保持进入该页面
      // 如果缓存身份是学生，返回role是老师，但是不是学生身份，则需要跳转老师页面
      // 如果缓存是老师，返回role是老师，不管是不是学生身份，按缓存跳转老师页面
      if (jwRole && ((jwRole == 1 && res.role == 2 && !res.isStudent) || (jwRole == 2 && res.role == 2))) {
        this.$routerGo(this, "push", { path: "/edu/courseManagment" });
        return;
      }
      let today = utilJs.getNowTimeFormat('YYYY-MM-DD');
      this.faceType = this.$route.query.faceType || 0;
      this.selectedDay = this.$route.query.date || '';
      this.startTime = this.selectedDay || today;
      this.appointmentOrRecordList = [];
      this.dateMasksList = [];
      this.dataStatus = 'HAS_MORE_DATA';
      this.currentStudentId = 0;
      pageIndex = 1;
      this.endTime = this.startTime;
      this.courseStatus = 2;
      this.courseType = 0;
      this.sourceType = 0;
      this.courseList = [];
      this.studentList = [];
      this.allStudent = []
      this.manageStudentList = [];
      this.arrowStatus = false;
      this.maskerStatus = false;
      this.openAddStuModal = false;
      this.isFixed = false
      this.$nextTick(() => {
        this.isShowCalendar = true;
      })
      if (this.faceType == 0) {
        this.getScheduleDate(this.startTime);
        this.getAppointmentList();
      } else if (this.faceType == 1) {
        this.getStudentList();
        this.getCourseList();
      } else if (this.faceType == 2) {
        this.getScheduleDate(this.startTime);
        this.getClassRecord();
      } else if (this.faceType == 3) {
        this.getStudentList();
      }
      window.scrollTo(0, 0);
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
        let arrCampFilter = this.companyAuth.companyNav.filter((item) => {
          return item.navType == 24;
        });
        this.showNavBottomBar = arrCampFilter.length > 0;
      }
      setDocumentTitle(this.faceType == 0 ? "课程表" : this.faceType == 1 ? '我的课程' : this.faceType == 2 ? '上课记录' : this.faceType == 3 ? '学员管理' : '面授课');// eslint-disable-line
    },
    goCourseManagment() {
      localStorage.setItem("jwRole", 2)
      this.$routerGo(this, "push", { path: '/edu/courseManagment' });
    },
    // 获取当前选中月份,以及上下两个月有课程的日期列表
    getScheduleDate(startTime) {
      if (this.faceType == 0) {
        this.getStudentList();
        this.getSchoolList()
      }
      this.filterSchoolId = ['0']
      this.filterStudentId = ['0']
      let $this = this;
      let startYears = Number(startTime.split('-')[0])
      let startMonth = Number(startTime.split('-')[1])
      let startDate = startMonth > 1 ? (startYears + '-' + ((startMonth - 1) >= 10 ? (startMonth - 1) : ('0' + (startMonth - 1))) + '-01') : ((startYears - 1) + '-12-01');
      let endDate = startMonth < 12 ? (startYears + '-' + ((startMonth + 1) >= 10 ? (startMonth + 1) : ('0' + (startMonth + 1))) + '-' + utilJs.getMonthDays(startYears, startMonth + 1)) : ((startYears + 1) + '-01-31');
      let url = this.faceType == 0 ? 'educationSystem/schedule/course' : 'educationSystem/reservation/record';
      utilJs.getMethod(global.apiurl + url + '?selectType=2' + '&startDate=' + startDate + '&endDate=' + endDate + (this.faceType == 0 ? '' : '&type=1') + "&limit=93", res => {
        this.dateMasksList = [];
        if (res.data && res.data.length > 0) {
          res.data.forEach((item, index) => {
            $this.dateMasksList.push({
              year: Number(item.startDate.split('-')[0]),
              month: Number(item.startDate.split('-')[1]),
              date: Number(item.startDate.split('-')[2]),
            })
          })
        }
      }, failRes => {
      })
    },
    goToList(type) {
      this.$routerGo(this, "push", {
        path: "/edu/faceTeaching",
        query: {
          faceType: type, // 0 预约上课列表 1 课程列表 2 上课记录 4 学员管理
        }
      });
    },
    selectPopup() {
      this.arrowStatus = !this.arrowStatus;
      this.maskerStatus = !this.maskerStatus;
      if (this.arrowStatus) {
        this.maskerStatus = true;
      }
    },
    closeMasker() {
      this.maskerStatus = false;
      this.arrowStatus = false;
    },
    // 切换筛选我的课程的课程状态
    chageCourseStatus(courseStatus) {
      window.scrollTo(0, 0);
      this.courseStatus = courseStatus;
      this.dataStatus = 'HAS_MORE_DATA';
      this.arrowStatus = false;
      this.maskerStatus = false;
      // this.sourceType = 0;
      // this.courseType = 0;
      pageIndex = 1;
      this.courseList = [];
      this.getCourseList();
    },
    changeSourceType(sourceType) {
      window.scrollTo(0, 0);
      this.sourceType = sourceType;
      this.dataStatus = 'HAS_MORE_DATA';
      pageIndex = 1;
      this.courseList = [];
      this.maskerStatus = false;
      this.arrowStatus = false;
      this.getCourseList();
    },
    changeCourseType(courseType) {
      window.scrollTo(0, 0);
      this.courseType = courseType;
      pageIndex = 1;
      this.courseList = [];
      this.dataStatus = 'HAS_MORE_DATA';
      this.maskerStatus = false;
      this.arrowStatus = false;
      this.getCourseList();
    },
    selectStudent(studentId) {
      window.scrollTo(0, 0);
      this.currentStudentId = studentId;
      this.dataStatus = 'HAS_MORE_DATA';
      pageIndex = 1;
      this.courseList = [];
      this.maskerStatus = false;
      this.arrowStatus = false;
      this.getCourseList();
    },
    // 修改学员信息
    goToEditStudentInfo(studentId) {
      this.$routerGo(this, "push", {
        path: "/edu/editStuInfo",
        query: ({
          fromType: 2, //0表示新增学员 1表示编辑学员信息 2表示面授课学员管理中编辑
          studentId
        })
      })
    },
    addStudent() {
      this.$routerGo(this, "push", {
        path: "/edu/editStuInfo",
        query: {
          fromType: 3, //从管理学员 添加 学员
        }
      });
    },
    handleClickRoute() {
      this.$routerGo(this, "push", {
        path: "/edu/eduScan?sess=4yndpwna7m&type=1"
      })
    },
    showAddStuMoadl() {
      this.openAddStuModal = true;
    },
    closeAddStuModal() {
      this.openAddStuModal = false;
    },
    goAppointmentList() {
      this.$routerGo(this, "push", {
        path: "/edu/appointmentList",
        query: {
          comeFrom: 1,
        }
      })
    },
    goCourseDetail(id, saleCourseId, courseId, studentId, isAllow, isSignIn) {
      if (isAllow == -1 && isSignIn == 0) {
        this.$cjConfirm({
          title: '提示',
          message: '已退款,现已无权访问',
          showCancelButton: false,
          clickCloseModal: false
        })
      } else {
        if (id == 0 || id == null || id == '') {
          this.$cjConfirm({
            title: '提示',
            message: '该日程为管理员直接安排的体验课，因此无法跳转课程主页！',
            showCancelButton: false,
            clickCloseModal: false
          })
          return;
        }
        this.$routerGo(this, "push", {
          path: "/edu/courseDetail",
          query: {
            scid: id,
            saleCourseId: saleCourseId,
            courseId,
            studentId
          }
        })
      }
    },
    //上课记录
    getClassRecord() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "educationSystem/reservation/record?page=" + pageIndex + '&limit=' + LIMIT + "&studentId=" + this.currentStudentId + "&type=1" + '&startDate=' + this.startTime + '&endDate=' + this.endTime, res => {
        if (pageIndex == 1) {
          this.appointmentOrRecordList = res.data;
        } else {
          this.appointmentOrRecordList = [...this.appointmentOrRecordList, ...res.data];
        }
        if (!res.data || (res.data && (res.data.length < LIMIT))) {
          this.dataStatus = pageIndex == 1 && !(res.data && res.data.length) ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    // 获取课程列表
    getCourseList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "educationSystem/course?page=" + pageIndex + '&limit=' + LIMIT + "&status=" + this.courseStatus + "&source=" + this.sourceType + "&type=" + this.courseType + "&studentId=" + this.currentStudentId, res => {
        if (pageIndex == 1) {
          this.courseList = res.data;
        } else {
          this.courseList = [...this.courseList, ...res.data];
        }
        if (!res.data || (res.data && (res.data.length < LIMIT))) {
          this.dataStatus = pageIndex == 1 && !(res.data && res.data.length) ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    changeHtmlTag(textStr = '') { // 破坏标签，防止插入html标签
      if (!textStr) {
        return ''
      }
      return textStr.replace(/\</g, '< ')
    },
    // 获取日程校区列表
    getSchoolList() {
      utilJs.getMethod(global.apiurl + 'educationSystem/schedule/school?startDate=' + this.startTime + '&endDate=' + this.endTime, res => {
        const item = [{
          schoolId: '0',
          schoolName: '全部校区'
        }]
        let list = res || [];
        list = [...item, ...list]
        // 过滤掉schoolId=0的校区，这个是线上课产生的，实际并没有这个校区
        this.schoolList = [list.filter(i => i.schoolId).map(item => ({ ...item, name: this.changeHtmlTag(item.schoolName), value: `${item.schoolId}` }))];
      });
    },
    // 获取学员列表
    getStudentList() {
      utilJs.getMethod(global.apiurl + "educationSystem/student/binded?type=1", res => {
        this.studentList = res;
        this.allStudent = [res.map(item => ({ ...item, name: item.studentName, value: `${item.studentId}` }))];
        this.manageStudentList = res.slice(1);
        if (res.length <= 1) {
          this.dataStatus = 'NO_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
        }
      });
    },
    // 获取选中的时间范围
    getSelectDate(item) {
      if (item) {
        window.scrollTo(0, 0);
        this.startTime = item.startTime;
        this.endTime = item.endTime;
        this.faceType = this.$route.query.faceType || 0;
        this.appointmentOrRecordList = [];
        this.dateMasksList = [];
        this.dataStatus = 'HAS_MORE_DATA';
        this.currentStudentId = 0;
        pageIndex = 1;
        this.courseStatus = 2;
        this.courseType = 0;
        this.courseList = [];
        this.studentList = [];
        this.manageStudentList = [];
        this.arrowStatus = false;
        this.maskerStatus = false;
        this.openAddStuModal = false;
        if (this.faceType == 0) {
          this.getScheduleDate(this.startTime);
          this.getAppointmentList();
        } else if (this.faceType == 2) {
          this.getScheduleDate(this.startTime);
          this.getClassRecord();
        }
      }
    },
    // 获取预约上课
    getAppointmentList() {
      if (this.dataStatus == 'LOADING' || !this.startTime) {
        return;
      }
      this.dataStatus = 'LOADING';
      const filterSchool = this.filterSchoolId[0] && this.filterSchoolId[0] != 0 ? (`&schoolId=${this.filterSchoolId[0]}`) : ''
      const filterStudent = this.filterStudentId[0] && this.filterStudentId[0] != 0 ? (`&studentId=${this.filterStudentId[0]}`) : ''
      utilJs.getMethod(global.apiurl + "educationSystem/schedule/course?page=" + pageIndex + '&limit=' + LIMIT + '&startDate=' + this.startTime + '&endDate=' + this.endTime + filterSchool + filterStudent, res => {
        if (pageIndex == 1) {
          this.appointmentOrRecordList = res.data;
        } else {
          this.appointmentOrRecordList = [...this.appointmentOrRecordList, ...res.data];
        }
        if (!res.data || (res.data && (res.data.length < LIMIT))) {
          this.dataStatus = pageIndex == 1 && !(res.data && res.data.length) ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "面授课", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("面授课", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA') {
          if (this.faceType == 0) {
            this.getAppointmentList();
          } else if (this.faceType == 1) {
            this.getCourseList();
          } else if (this.faceType == 2) {
            this.getClassRecord();
          } else if (this.faceType == 3) {
            this.getStudentList();
          }
        }
      });
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 130) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  },
  activated() {
    if (localStorage.getItem("jwRole") == 2) {
      this.$routerGo(this, "push", { path: '/edu/courseManagment' });
    } else {
      this.initData();
      this.wechatShare();
      window.addEventListener('scroll', this.windowScrollFunction);
    }
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.masker {
  position: fixed;
  top: 6rem;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.translate-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.appointment-record {
  background: linear-gradient(
    -90deg,
    rgba(248, 147, 92, 1),
    rgba(255, 109, 136, 1)
  );
}
.selectStudent >>> .weui-cell__ft,
.selectAddress >>> .weui-cell__ft {
  padding: 0 !important;
}
.selectStudent >>> .weui-cell,
.selectAddress >>> .weui-cell {
  padding: 0 !important;
}
.selectStudent >>> .weui-cell__ft:after,
.selectAddress >>> .weui-cell__ft:after {
  display: none !important;
}
.picked >>> .vux-popup-picker-select-box {
  max-width: 100%;
}
.picked >>> .vux-popup-picker-value {
  color: var(--mb7color);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
  padding-top: 0.1rem;
}
</style>
